/*-- copyright
 * OpenProject is an open source project management software.
 * Copyright (C) 2012-2020 the OpenProject GmbH
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License version 3.
 *
 * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
 * Copyright (C) 2006-2013 Jean-Philippe Lang
 * Copyright (C) 2010-2013 the ChiliProject Team
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 *
 * See docs/COPYRIGHT.rdoc for more details.  ++
 */

@import openproject/variables
@import helpers/functions

@mixin story-header
  background-color: #FFFFFF
  font-size: 1rem - rem-calc(5px)
  opacity: 0.8
  filter: alpha(opacity = 80)
  overflow: hidden
  padding-bottom: 1px
  padding-right: 3px

@mixin story-footer
  float: left
  font-size: 1rem - rem-calc(5px)
  width: 85%
  margin-top: 4px
  padding: 2px
  padding-top: 0

@mixin ellipsis
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis


.controller-rb_taskboards.action-show #main
  overflow: visible

#rb .task
  color: #484848
  line-height: inherit
  white-space: inherit

#rb
  overflow-x: auto
  #assigned_to_id_options
    display: none
  .swimlane
    min-width: 105px
    /* width + (2*margin) + (2*padding) + (2*border) of .work_package */
    padding: 5px 0 0 5px
    width: 105px
    /* Must be the same as min-width */
  #board_header
    background-color: #EBEBEB
    border: 1px solid #CCCCCC
    margin-bottom: 0
    margin-right: 10px
    td
      background-color: #EBEBEB
      border-right: 1px dotted #CFCFCF
      color: black
      font-weight: bold
      text-align: center
      vertical-align: middle
      padding-top: 0
      padding-bottom: 0
      line-height: 30px
      &:first-child
        min-width: 241px
        width: 241px

  .board
    background-color: #FCFCFC
    border: 1px solid #CCCCCC
    border-top: none
    margin-right: 10px
    /* IE7 table fix */
    table-layout: fixed
    border-collapse: collapse
    empty-cells: show
    tr:hover
      background-color: #ffffff
    td
      border-right: 1px dotted #CFCFCF
      border-bottom: 1px dotted #CFCFCF
      vertical-align: top
      &:first-child
        min-width: 210px
        padding: 5px
        width: 210px
    tr:last-child td
      border-bottom: none
    .add_new
      margin: 0
      min-width: 30px
      padding: 0
      text-align: center
      vertical-align: middle
      width: 30px
      &.clickable:hover
        cursor: pointer
        background-color: #ffffcc
  .story, .label_sprint_impediments
    background-color: #F8F6A5
    border: none
    display: block
    float: left
    height: 80px
    margin: 5px
    padding: 5px
    position: relative
    width: 190px
  .story
    .subject
      height: 42px
      line-height: 13px
      margin-top: 0
      overflow: hidden
      padding: 2px
      width: 180px
    &.closed .subject
      text-decoration: line-through
  .work_package, .placeholder
    background-color: #AFAFAF
    border: none
    cursor: move
    display: block
    float: left
    font-size: 10px
    height: 80px
    margin: 5px
    padding: 5px
    position: relative
    width: 85px
  .work_package.prevent_edit
    cursor: default
  .placeholder
    background-color: #FFFF00
    border: 1px dashed #333300
    height: 78px
    width: 83px
  .work_package
    &.closed .subject.editable
      text-decoration: line-through
    .v
      display: none
    .remaining_hours.editable
      border: 2px solid #FFFFFF
      background-color: #EE0000
      bottom: -5px
      color: #FFFFFF
      font-size: 9px
      height: 13px
      padding-left: 5px
      padding-right: 5px
      position: absolute
      right: -5px
    .blocks, .remaining_hours.editable.empty
      display: none
    .indicator
      display: none

    &.saving .indicator
      background-color: #FFFFFF
      background-position: center
      background-repeat: no-repeat
      border: 2px solid #000000
      height: 16px
      padding: 2px
      position: absolute
      left: 36px
      top: 38px
      width: 16px
      background-image: image-url("loading.gif")
      display: block

    &.error .indicator
      background: none
      border: none

    &.error.icon-bug:before
      position: absolute
      top: 30px
      left: 28px
      color: red


    .editors
      display: none

/*
 *  swimlane class is used by:
 *    - #board_header
 *    - .board
 *
 *  Also use by the Column Width preference to determine the unit width of the
 *  swimlanes. See RB.Taskboard.initialize()

/* status labels */

/* shared #impediments and #tasks */

/* item styles used by .task and .impediment */

/* dialog */

.task_editor_dialog.ui-dialog
  .ui-widget-header
    background: none
    background-color: #FFFFFF
    opacity: 0.5
    filter: alpha(opacity = 50)
  .ui-dialog-title
    float: right
    margin-right: 0
    color: $body-font-color
  &.ui-widget-content
    background: none
    border: none
    .editor
      color: $body-font-color
  .ui-dialog-buttonpane.ui-widget-content
    background: none
    background-color: none
    border: none

.ui-dialog-titlebar-close
  overflow: hidden

.dark #task_editor label
  color: #FFFFFF

.light #task_editor label
  color: #000000

.dark div
  color: #FFFFFF

.light div
  color: #000000

/* item editor */

#task_editor
  label
    display: block
    font-size: 11px
    text-transform: capitalize
    width: 100%
  .editor
    font-size: 11px
    margin-bottom: 10px
    width: 100%
  .subject
    height: 65px
    width: 272px
  .remaining_hours, .blocks
    width: 268px

/* compact view */

#rb
  .compact
    .story, .label_sprint_impediments
      height: 15px
    .story .subject
      display: none
    .work_package
      height: 21px
      padding: 0
      width: 21px
      *
        display: none
    .placeholder
      background-color: #FFFF00
      border: 1px dashed #333300
      height: 19px
      width: 19px
  #impediment_template, #task_template
    display: none

/* others */

.story
  .story-bar
    @include story-header
    text-align: right
    width: 180px
    clear: both
    .id
      float: right
    .status
      float: left

.story,
.label_sprint_impediments
  font-size: 1rem - rem-calc(3px)

.work_package
  .id
    @include story-header
    text-align: right
    width: 75px
    a
      opacity: 1.0
      filter: alpha(opacity = 100)
  .editable:hover
    background-color: transparent
  .subject.editable
    font-size: 1rem - rem-calc(3px)
    height: 42px
    line-height: 13px
    margin-top: 0
    overflow: hidden
    padding: 2px
    width: 81px

.story
  .story-footer
    .assigned_to_id
      @include story-footer
      @include ellipsis
    .story-points
      margin-top: 2px
      float: right
.work_package
  .assigned_to_id.editable
    @include story-footer
    .t
      @include ellipsis

/* Toolbar modifications (no support for labels form the component) */

#toolbar
  label[for=col_width_input]
    padding-top: rem-calc(20px)

  #col_width_input
    max-width: 60px
